<template>
	<view>
		<u-sticky offsetTop="0">
			<navbar :tip="tip" title=" " :isback="true"></navbar>
		</u-sticky>
		<view class="con">
			<u-swiper :list="list1" height="326.34rpx" radius='38rpx' bgColor="#D3D0D0"></u-swiper>
			<view class="box boxs">
				<image :src="URL(schooldetail.icon)" class="box__pic" mode="aspectFill"></image>
				<view class="">
					<view class="box__name">
						{{schooldetail.title}}
					</view>
					<view class="u-flex u-flex-y-center u-flex-wrap">
						<view class="box__tip" v-for="(item,index) in schooldetail.label_text" :key="index">
							{{item}}
						</view>
					</view>
					<view class="box__text">
						学校地址：{{schooldetail.address}}
					</view>
					<view class="box__text" style="margin-top: -10rpx;">
						联系方式：{{schooldetail.telephone}}
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="u-flex u-flex-y-center u-flex-wrap" style="margin-bottom: 49rpx;">
					<view class="box1__sx" :class="curtab==index?'active':''" v-for="(item,index) in tablist"
						:key="index" @click="curtab=index">
						{{item.name}}
					</view>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					王牌专业
				</view>
				<view class="box1__b boxs">
					<view class="box1__b__l">
						<view class="box1__b__l__text" v-for="(item,index) in schooldetail.category_text" :key="index"
							:class="cur==index?'box1__b__l__active':''" @click="cur=index">
							<view class="box1__b__l__line" v-if="cur==index">

							</view>
							<view class="" style="position: relative;">
								{{item.title}}
							</view>

						</view>
					</view>
					<view class="box1__b__r" v-if='schooldetail.category_text'>
						<view class="box1__b__r__item" v-for="(item,index) in schooldetail.category_text[cur].data" :key="index"
							:class="index==3?'mb0':''">
							<view class="">
								{{item.title}}
							</view>
							<image src="/static/home/eye.png" class="box1__b__r__icon" mode=""></image>
						</view>
					</view>

				</view>
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					学校概况
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="schooldetail.content"></u-parse>
						</view>
					</u-read-more>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					招生计划
				</view>
				<u-parse :tagStyle="style" :content="schooldetail.plan"></u-parse>
				
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					招生简介
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore3" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="schooldetail.brochure"></u-parse>
						</view>
					</u-read-more>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					学校概况
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore1" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<!-- 从东莞高铁站出发的，可以乘坐地铁二号线，在蛤地下车，转坐公交车78路或者是42路在联科产业园下车，再步行2.2公里到达学校，也可以乘坐255路车，直接直达市轻工业学校，下车只需要步行148米，从东莞市客运站出发的，可以乘坐G10路车，在报业大厦下车，同站台转乘78路车在联科产业园下车。 -->
							<!-- schooldetail.navigation -->
							<u-parse :tagStyle="style" :content="schooldetail.navigation"></u-parse>
						</view>
					</u-read-more>
				</view>
				<view class="box1__text">
					注:数据来源于院校官网与考试院公告的数据，如有错，请以官方发布为准，本系统不承担相应责任。
				</view>
				<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 20rpx;">
					<u-button :customStyle="{
						height:'76.34rpx',
						fontSize:'22rpx',
						width:'320.61rpx',
						color:'#00456A',
					}" color="#ACC3FF" shape='circle'>加入群聊</u-button>
					<u-button :customStyle="{
						height:'76.34rpx',
						fontSize:'22rpx',
						width:'320.61rpx',
						color:'#00456A',
					}" color="#ACC3FF" shape='circle'>预约报名</u-button>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="" @click="clicksc">
				<image v-if="!schooldetail.is_collect" src="/static/cxx/Group 223.png" class="footer__pic" mode="">
				</image>
				<image v-if="!schooldetail.is_collect" src="/static/cxx/Group 22.png" class="footer__pic" mode="">
				</image>
			</view>
			<image src="/static/cxx/Group 2235.png" class="fx" mode=""></image>
		</view>
	</view>
</template>

<script>
	import school from '@/api/_school.js'
	export default {
		data() {
			return {
				issc: false,
				tip: '',
				list1: [],
				zylist: [],
				tablist: [{
						name: '中考资讯'
					},
					{
						name: '择校需知'
					},
					{
						name: '择校需知'
					},
					{
						name: '择校需知'
					}
				],
				curtab: 0,
				cur: 0,
				shadowStyle: {
					background: "linear-gradient( 160deg, #FFFBFB 0%, #B1CDFF 100%)",
				},
				id: null,
				schooldetail: {},
				style:{
					span:'font-size: 23rpx!important;color: #292929!important;line-height: 28rpx;!important',
					p:'font-size: 23rpx!important;color: #292929!important;line-height: 28rpx;!important'
				}
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			async clicksc(){
				if(this.schooldetail.is_collect){
					return
				}
				let res = await school.add_collect({school_id:this.id})
				if(res.data.code==200){
					this.getinfo()
				}
			},
			async getinfo() {
				let res = await school.schoolinfo({
					id: this.id
				})
				if (res.data.code == 200) {
					this.schooldetail = res.data.data
					this.schooldetail.cover.split(',').map(t=>{
						this.list1.push(this.URL(t))
					})
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
						this.$refs.uReadMore1.init();
						this.$refs.uReadMore3.init();
					})
				}
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getinfo()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3124.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.con {
		padding: 0 24rpx;

		.box {
			margin-top: 19rpx;
			padding: 5rpx 28rpx 11rpx;
			// height: 174rpx;
			background: #FFFFFF;

			border-radius: 57rpx 57rpx 57rpx 57rpx;
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;

			&__pic {
				width: 122rpx;
				height: 122rpx;
				background: #D9D9D9;
				border-radius: 50%;
				margin-right: 34rpx;
				flex-shrink: 0;
			}

			&__name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #000000;
				line-height: 54rpx;
			}

			&__tip {
				padding: 0 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 19rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				background-color: #84B1FF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				margin-right: 7rpx;
				margin-bottom: 10rpx;
			}

			&__text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 19rpx;
				color: #747474;
				line-height: 40rpx;
			}
		}
	}

	.mb0 {
		margin-bottom: 0 !important;
	}

	.box1 {
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 0 0;
		padding: 30rpx 22rpx 22rpx;

		&__text {
			width: 635rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 19rpx;
			color: #636363;
			line-height: 27rpx;
			margin-left: 15rpx;

		}

		&__sx {
			padding: 0 15rpx;
			height: 34rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 2rpx solid #93B8F9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #93B8F9;
			line-height: 40rpx;
			margin-right: 10rpx;
		}

		.active {
			height: 38rpx;
			background: #84B1FF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			color: #fff;
			font-size: 23rpx;
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #292929;
			line-height: 61rpx;
			margin-bottom: 9rpx;

			&__line {
				height: 61rpx;
				width: 15rpx;
				background-color: #B1CDFF;
				margin-right: 15rpx;
				margin-left: 6rpx;
			}
		}

		&__b {
			border-radius: 38rpx;
			padding: 28rpx 50rpx 28rpx 0;
			display: flex;
			margin-bottom: 22rpx;

			&__l {
				width: 187rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					line-height: 40rpx;
					color: #636363;
					margin-bottom: 50rpx;
					position: relative;
				}

				&__active {
					color: #292929;
				}

				&__line {
					width: 100%;
					height: 15rpx;
					border-radius: 13rpx 13rpx 13rpx 13rpx;
					background-color: #CFEAFF;
					position: absolute;
					bottom: -8rpx;
				}
			}

			&__r {
				border-left: 6rpx solid #D7D7D7;
				flex: 1;

				&__item {
					font-family: Alegreya, Alegreya;
					font-weight: 500;
					font-size: 23rpx;
					color: #292929;
					line-height: 40rpx;
					padding: 0 0 0 24rpx;
					margin-bottom: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;
				}

				&__icon {
					width: 25rpx;
					height: 19rpx;
				}
			}
		}

		&__b1 {
			border-radius: 38rpx;
			padding: 11rpx 0 0;
			margin-bottom: 22rpx;
			overflow: hidden;

		}

		&__pic {
			width: 100%;
			height: 323rpx;
			background: #D9D9D9;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			margin-bottom: 16rpx;
		}
	}

	.boxs {
		box-shadow: 0rpx 2rpx 8rpx 0rpx #ACCCC5;
	}

	/deep/.u-read-more__toggle {

		height: 31px !important;
		margin-top: -19px !important;
		opacity: 0.52 !important;
		padding: 0 !important;
	}

	.footer {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;

		&__pic {
			width: 91.6rpx;
			height: 91.6rpx;
			margin-bottom: 9rpx;
		}
	}

	.sc {
		width: 92rpx;
		height: 92rpx;
		background: #3EB8FF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;

		&__icon {
			width: 32rpx;
			height: 29rpx;
			margin-bottom: 6rpx;
		}
	}

	.fx {
		width: 92rpx;
		height: 92rpx;
		background: #3EB8FF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;

		&__icon {
			width: 34rpx;
			height: 27rpx;
			margin-bottom: 6rpx;
		}
	}
</style>